<template>
  <div class="box">
    <div class="left-box">
      <div class="content bg-box" :class="{ expandcontent: !isleftboxShow }">
        <RealTimeTree @playVideo="playVideo"></RealTimeTree>
      </div>

      <div class="control" @click="isleftboxShow = !isleftboxShow">
        <img v-show="isleftboxShow" src="/tree/left-sq.png">
        <img v-show="!isleftboxShow" src="/tree/left-zk.png">
      </div>
    </div>

    <div style="width: 10px"></div>

    <div class="right-box">
      <el-empty style="height: 90%" v-if="emptyShow" description="暂无数据，请选择杆塔！"/>
      <div v-else style="height: 100%">
        <el-row :gutter="10" v-if="stationData.kxIncline != null">
          <el-col :span="16" class="title-col">
            <span class="title">杆塔倾斜</span>
            <!--            <span class="uptime">{{ stationData.kxIncline.timeStamp }}</span>-->
            <!--          <img src="@/views/sensorData/imgs/err.png"/>-->
            <!--            <span class="stat" style="margin-left: 10px">正常</span>-->
          </el-col>
          <el-col :span="8" class="tiele-right">
            <img src="@/views/sensorData/imgs/history.png"/>
            <div style="width: 4px"></div>
            <span @click="switcSrawer('kxincline','杆塔倾斜历史数据',stationData.kxIncline.timeStamp)">历史数据</span>
          </el-col>
          <el-col :span="3">
            <div class="nrxx">
              <p>采集时间</p>
              <p><span class="sum">{{ stationData.kxIncline.timeStamp }}</span></p>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="nrxx cursor_pointer"
                 @click="inclineHandle('inclination','mm/m','倾斜度',stationData.kxIncline.timeStamp)">
              <p>倾斜度</p>
              <p><span class="sum">{{ stationData.kxIncline.inclination }}</span>mm/m</p>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="nrxx cursor_pointer"
                 @click="inclineHandle('inclinationX','mm/m','顺线倾斜度',stationData.kxIncline.timeStamp)">
              <p>顺线倾斜度</p>
              <p><span class="sum">{{ stationData.kxIncline.inclinationX }}</span>mm/m</p>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="nrxx cursor_pointer"
                 @click="inclineHandle('inclinationY','mm/m','横线倾斜度',stationData.kxIncline.timeStamp)">
              <p>横线倾斜度</p>
              <p><span class="sum">{{ stationData.kxIncline.inclinationY }}</span>mm/m</p>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="nrxx cursor_pointer"
                 @click="inclineHandle('angleX','°','顺线倾斜角',stationData.kxIncline.timeStamp)">
              <p>顺线倾斜角</p>
              <p><span class="sum">{{ stationData.kxIncline.angleX }}</span>°</p>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="nrxx cursor_pointer"
                 @click="inclineHandle('angleY','°','横线倾斜角',stationData.kxIncline.timeStamp)">
              <p>横线倾斜角</p>
              <p><span class="sum">{{ stationData.kxIncline.angleY }}</span>°</p>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="10" v-if="stationData.kxMeteorology != null">
          <el-col :span="16" class="title-col">
            <span class="title">气象监测</span>
            <!--            <span class="uptime">{{ stationData.kxMeteorology.timeStamp }}</span>-->
            <!--          <img src="@/views/sensorData/imgs/err.png"/>-->
            <!--            <span class="stat" style="margin-left: 10px">正常</span>-->
          </el-col>
          <el-col :span="8" class="tiele-right">
            <img src="@/views/sensorData/imgs/history.png"/>
            <div style="width: 4px"></div>
            <span
                @click="switcSrawer('kxmeteorology','气象监测历史数据',stationData.kxMeteorology.timeStamp)">历史数据</span>
          </el-col>
          <el-col :span="3">
            <div class="nrxx">
              <p>采集时间</p>
              <p><span class="sum">{{ stationData.kxMeteorology.timeStamp }}</span></p>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="nrxx cursor_pointer"
                 @click="meteorologyHandle('averageWindSpeed10min','m/s','平均风速',stationData.kxMeteorology.timeStamp)">
              <p>平均风速</p>
              <p><span class="sum">{{ stationData.kxMeteorology.averageWindSpeed10min }}</span>m/s</p>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="nrxx cursor_pointer"
                 @click="meteorologyHandle('averageWindDirection10min','°','平均风向',stationData.kxMeteorology.timeStamp)">
              <p>平均风向</p>
              <p><span class="sum">{{ stationData.kxMeteorology.averageWindDirection10min }}</span>°</p>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="nrxx cursor_pointer"
                 @click="meteorologyHandle('maxWindSpeed','m/s','最大风速',stationData.kxMeteorology.timeStamp)">
              <p>最大风速</p>
              <p><span class="sum">{{ stationData.kxMeteorology.maxWindSpeed }}</span>m/s</p>
            </div>
          </el-col>
          <!--          <el-col :span="2">-->
          <!--            <div class="nrxx cursor_pointer"-->
          <!--                 @click="inclineHandle('extremeWindSpeed','m/s','极大风速',stationData.kxMeteorology.timeStamp)">-->
          <!--              <p>极大风速</p>-->
          <!--              <p><span class="sum">{{ stationData.kxMeteorology.extremeWindSpeed }}</span>m/s</p>-->
          <!--            </div>-->
          <!--          </el-col>-->
          <el-col :span="2">
            <div class="nrxx cursor_pointer"
                 @click="meteorologyHandle('standardWindSpeed','m/s','标准风速',stationData.kxMeteorology.timeStamp)">
              <p>标准风速</p>
              <p><span class="sum">{{ stationData.kxMeteorology.standardWindSpeed }}</span>m/s</p>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="nrxx cursor_pointer"
                 @click="meteorologyHandle('airTemperature','℃','气温',stationData.kxMeteorology.timeStamp)">
              <p>气温</p>
              <p><span class="sum">{{ stationData.kxMeteorology.airTemperature }}</span>℃</p>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="nrxx cursor_pointer"
                 @click="meteorologyHandle('humidity','%RH','湿度',stationData.kxMeteorology.timeStamp)">
              <p>湿度</p>
              <p><span class="sum">{{ stationData.kxMeteorology.humidity }}</span>%RH</p>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="nrxx cursor_pointer"
                 @click="meteorologyHandle('airPressure','hPa','气压',stationData.kxMeteorology.timeStamp)">
              <p>气压</p>
              <p><span class="sum">{{ stationData.kxMeteorology.airPressure }}</span>hPa</p>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="nrxx cursor_pointer"
                 @click="meteorologyHandle('precipitation','mm','降雨量',stationData.kxMeteorology.timeStamp)">
              <p>降雨量</p>
              <p><span class="sum">{{ stationData.kxMeteorology.precipitation }}</span>mm</p>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="nrxx cursor_pointer"
                 @click="meteorologyHandle('precipitationIntensity','mm/min','雨强',stationData.kxMeteorology.timeStamp)">
              <p>雨强</p>
              <p><span class="sum">{{ stationData.kxMeteorology.precipitationIntensity }}</span>mm/min</p>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="nrxx cursor_pointer"
                 @click="meteorologyHandle('radiationIntensity','W/㎡','光辐射强度',stationData.kxMeteorology.timeStamp)">
              <p>光辐射强度</p>
              <p><span class="sum">{{ stationData.kxMeteorology.radiationIntensity }}</span>W/㎡</p>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="10" v-if="stationData.kxWorkStatus != null">
          <el-col :span="16" class="title-col">
            <span class="title">工作状态</span>
            <!--            <span class="uptime">{{ stationData.kxWorkStatus.timeStamp }}</span>-->
            <!--          <img src="@/views/sensorData/imgs/err.png"/>-->
            <!--            <span class="stat" style="margin-left: 10px">正常</span>-->
          </el-col>
          <el-col :span="8" class="tiele-right">
            <img src="@/views/sensorData/imgs/history.png"/>
            <div style="width: 4px"></div>
            <span
                @click="switcSrawer('kxworkstatus','工作状态历史数据',stationData.kxWorkStatus.timeStamp)">历史数据</span>
          </el-col>
          <el-col :span="3">
            <div class="nrxx">
              <p>采集时间</p>
              <p><span class="sum">{{ stationData.kxWorkStatus.timeStamp }}</span></p>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="nrxx cursor_pointer"
                 @click="kxWorkStatusStatisticsHandle('batteryVoltage','V','电源电压',stationData.kxWorkStatus.timeStamp)">
              <p>电源电压</p>
              <p><span class="sum">{{ stationData.kxWorkStatus.batteryVoltage }}</span>V</p>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="nrxx cursor_pointer"
                 @click="kxWorkStatusStatisticsHandle('operationTemperature','℃','工作温度',stationData.kxWorkStatus.timeStamp)">
              <p>工作温度</p>
              <p><span class="sum">{{ stationData.kxWorkStatus.operationTemperature }}</span>℃</p>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="nrxx cursor_pointer"
                 @click="kxWorkStatusStatisticsHandle('batteryCapacity','%','电池电量',stationData.kxWorkStatus.timeStamp)">
              <p>电池电量</p>
              <p><span class="sum">{{ stationData.kxWorkStatus.batteryCapacity }}</span>%</p>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="nrxx">
              <p>浮充状态</p>
              <p><span class="sum">{{ getDictLabel("floating_charge", stationData.kxWorkStatus.floatingCharge) }}</span>
              </p>
            </div>
          </el-col>
          <!--          <el-col :span="2">-->
          <!--            <div class="nrxx">-->
          <!--              <p>工作总时间</p>-->
          <!--              <p><span class="sum">{{ stationData.kxWorkStatus.totalWorkingTime }}</span>H</p>-->
          <!--            </div>-->
          <!--          </el-col>-->
          <!--          <el-col :span="2">-->
          <!--            <div class="nrxx">-->
          <!--              <p>连续工作时间</p>-->
          <!--              <p><span class="sum">{{ stationData.kxWorkStatus.workingTime }}</span>H</p>-->
          <!--            </div>-->
          <!--          </el-col>-->
          <!--          <el-col :span="2">-->
          <!--            <div class="nrxx">-->
          <!--              <p>网络连接状态</p>-->
          <!--              <p><span class="sum">{{ getDictLabel("connection_State", stationData.kxWorkStatus.connectionState) }}</span></p>-->
          <!--            </div>-->
          <!--          </el-col>-->
        </el-row>

        <div v-if="stationData.kxMetalTempSensors != null" style="height: 100%">
          <el-empty style="height: 90%;margin: auto" v-if="stationData.kxMetalTempSensors.length == 0"
                    description="暂无数据"/>
          <el-row :gutter="10" v-if="stationData.kxMetalTempSensors.length !== 0">
            <el-col :span="16" class="title-col">
              <span class="title">N塔-金具测温</span>
              <!--              <span class="stat" style="margin-left: 10px">正常</span>-->
            </el-col>
            <el-col :span="8" class="tiele-right">
              <img src="@/views/sensorData/imgs/history.png"/>
              <div style="width: 4px"></div>
              <span
                  @click="switcSrawer('kxmetaltempsensors','金具历史数据',stationData.kxMetalTempSensors[0].timeStamp)">历史数据</span>
            </el-col>
            <el-row style="width: 100%" :gutter="10">
              <el-col :span="3">
                <div class="nrxx nrxx-jinju">
                  <p>传感器</p>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="nrxx nrxx-jinju">
                  <p>采集时间</p>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="nrxx nrxx-jinju">
                  <p>安装位置</p>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="nrxx nrxx-jinju">
                  <p>告警标识</p>
                </div>
              </el-col>
              <el-col :span="2">
                <div class="nrxx nrxx-jinju">
                  <p>金具温度</p>
                </div>
              </el-col>
              <!--            <el-col :span="2">-->
              <!--              <div class="nrxx nrxx-jinju">-->
              <!--                <p>传感器电压</p>-->
              <!--              </div>-->
              <!--            </el-col>-->
              <!--            <el-col :span="2">-->
              <!--              <div class="nrxx nrxx-jinju">-->
              <!--                <p>信号值</p>-->
              <!--              </div>-->
              <!--            </el-col>-->
            </el-row>

            <el-row style="width: 100%" :gutter="10" v-for="(item,index) in stationData.kxMetalTempSensors.slice(0, 12)"
                    :key="index">
              <el-col :span="3">
                <div class="nrxx nrxx-jinju">
                  <!--                <p>传感器</p>-->
                  <p><span class="sum">{{ item.componentId }}</span></p>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="nrxx nrxx-jinju">
                  <!--                <p>采集时间</p>-->
                  <p><span class="sum">{{ item.timeStamp }}</span></p>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="nrxx nrxx-jinju">
                  <!--                <p>安装位置</p>-->
                  <p><span class="sum">{{ item.location }}</span></p>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="nrxx nrxx-jinju">
                  <!--                <p>告警标识</p>-->
                  <p>
                    <span v-if="item.alermFlag.includes('采集成功')" class="sum">{{ item.alermFlag }}</span>
                    <span v-else-if="item.alermFlag.includes('采集失败')" class="sum-danger">{{ item.alermFlag }}</span>
                    <span v-else class="sum-warning">{{ item.alermFlag }}</span>
                  </p>
                </div>
              </el-col>
              <el-col :span="2">
                <div class="nrxx nrxx-jinju cursor_pointer"
                     @click="kxMetalTempSensorsHandle('temperature','℃',`N塔-金具测温-${item.componentId}`,item.componentId,item.timeStamp,item.cmdId)">
                  <!--                <p>金具温度</p>-->
                  <p><span class="sum">{{ item.temperature }}</span>℃</p>
                </div>
              </el-col>
              <!--            <el-col :span="2">-->
              <!--              <div class="nrxx nrxx-jinju">-->
              <!--                &lt;!&ndash;                <p>传感器电压</p>&ndash;&gt;-->
              <!--                <p><span class="sum">{{ item.batteryVoltage }}</span>V</p>-->
              <!--              </div>-->
              <!--            </el-col>-->
              <!--            <el-col :span="2">-->
              <!--              <div class="nrxx nrxx-jinju">-->
              <!--                &lt;!&ndash;                <p>信号值</p>&ndash;&gt;-->
              <!--                <p><span class="sum">{{ item.rssi }}</span></p>-->
              <!--              </div>-->
              <!--            </el-col>-->
            </el-row>
          </el-row>

          <el-row :gutter="10" v-if="stationData.kxMetalTempSensors.length !== 0">
            <el-col :span="16" class="title-col">
              <span class="title">T塔-金具测温</span>
              <!--              <span class="stat" style="margin-left: 10px">正常</span>-->
            </el-col>
            <el-col :span="8" class="tiele-right">
              <img src="@/views/sensorData/imgs/history.png"/>
              <div style="width: 4px"></div>
              <span
                  @click="switcSrawer('kxmetaltempsensors','金具历史数据',stationData.kxMetalTempSensors[0].timeStamp)">历史数据</span>
            </el-col>
            <el-row style="width: 100%" :gutter="10">
              <el-col :span="3">
                <div class="nrxx nrxx-jinju">
                  <p>传感器</p>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="nrxx nrxx-jinju">
                  <p>采集时间</p>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="nrxx nrxx-jinju">
                  <p>安装位置</p>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="nrxx nrxx-jinju">
                  <p>告警标识</p>
                </div>
              </el-col>
              <el-col :span="2">
                <div class="nrxx nrxx-jinju">
                  <p>金具温度</p>
                </div>
              </el-col>
              <!--            <el-col :span="2">-->
              <!--              <div class="nrxx nrxx-jinju">-->
              <!--                <p>传感器电压</p>-->
              <!--              </div>-->
              <!--            </el-col>-->
              <!--            <el-col :span="2">-->
              <!--              <div class="nrxx nrxx-jinju">-->
              <!--                <p>信号值</p>-->
              <!--              </div>-->
              <!--            </el-col>-->
            </el-row>

            <el-row style="width: 100%" :gutter="10" v-for="(item,index) in stationData.kxMetalTempSensors.slice(12)"
                    :key="index">
              <el-col :span="3">
                <div class="nrxx nrxx-jinju">
                  <!--                <p>传感器</p>-->
                  <p><span class="sum">{{ item.componentId }}</span></p>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="nrxx nrxx-jinju">
                  <!--                <p>采集时间</p>-->
                  <p><span class="sum">{{ item.timeStamp }}</span></p>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="nrxx nrxx-jinju">
                  <!--                <p>安装位置</p>-->
                  <p><span class="sum">{{ item.location }}</span></p>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="nrxx nrxx-jinju">
                  <!--                <p>告警标识</p>-->
                  <p>
                    <span v-if="item.alermFlag.includes('采集成功')" class="sum">{{ item.alermFlag }}</span>
                    <span v-else-if="item.alermFlag.includes('采集失败')" class="sum-danger">{{ item.alermFlag }}</span>
                    <span v-else class="sum-warning">{{ item.alermFlag }}</span>
                  </p>
                </div>
              </el-col>
              <el-col :span="2">
                <div class="nrxx nrxx-jinju cursor_pointer"
                     @click="kxMetalTempSensorsHandle('temperature','℃',`T塔-金具测温-${item.componentId}`,item.componentId,item.timeStamp,item.cmdId)">
                  <!--                <p>金具温度</p>-->
                  <p><span class="sum">{{ item.temperature }}</span>℃</p>
                </div>
              </el-col>
              <!--            <el-col :span="2">-->
              <!--              <div class="nrxx nrxx-jinju">-->
              <!--                &lt;!&ndash;                <p>传感器电压</p>&ndash;&gt;-->
              <!--                <p><span class="sum">{{ item.batteryVoltage }}</span>V</p>-->
              <!--              </div>-->
              <!--            </el-col>-->
              <!--            <el-col :span="2">-->
              <!--              <div class="nrxx nrxx-jinju">-->
              <!--                &lt;!&ndash;                <p>信号值</p>&ndash;&gt;-->
              <!--                <p><span class="sum">{{ item.rssi }}</span></p>-->
              <!--              </div>-->
              <!--            </el-col>-->
            </el-row>
          </el-row>
        </div>

      </div>
    </div>

    <el-dialog v-model="drawer" :title="dialogTitle" width="77%" :with-header="false" @close="historyviews = ''">
      <kxincline v-if="historyviews === 'kxincline'" ref="kxincline" :station-id="id"
                 :cmd-id="stationData.kxIncline.cmdId" :porppictureDate="pictureDate"></kxincline>
      <kxmeteorology v-if="historyviews === 'kxmeteorology'" ref="kxmeteorology" :station-id="id"
                     :cmd-id="stationData.kxMeteorology.cmdId" :porppictureDate="pictureDate"></kxmeteorology>
      <kxworkstatus v-if="historyviews === 'kxworkstatus'" ref="kxworkstatus" :station-id="id"
                    :cmd-id="stationData.kxWorkStatus.cmdId" :porppictureDate="pictureDate"></kxworkstatus>
      <kxmetaltempsensors v-if="historyviews === 'kxmetaltempsensors'" ref="kxmetaltempsensors" :station-id="id"
                          :cmd-id="stationData.kxMetalTempSensors[0].cmdId"
                          :porppictureDate="pictureDate"></kxmetaltempsensors>
    </el-dialog>

    <KxinclineStatistics ref="kxinclinestatistics" :stationId="id"></KxinclineStatistics>

    <KxMeteorologystatistics ref="kxMeteorologystatistics" :stationId="id"></KxMeteorologystatistics>

    <KxWorkStatusStatistics ref="kxworkwtatuswtatistics" :stationId="id"></KxWorkStatusStatistics>
    <KxMetalTempSensorsStatistics ref="kxmetaltempsensorsstatistics"></KxMetalTempSensorsStatistics>
  </div>
</template>

<script>
import useView from "@/hooks/useView";
import {defineComponent, onMounted, reactive, toRefs, watch} from "vue";
import RealTimeTree from "./leftbox/realTimeTree.vue";
import baseService from "@/service/baseService";
import kxincline from "./historyTable/kxincline.vue";
import kxmeteorology from "./historyTable/kxmeteorology.vue";
import kxworkstatus from "./historyTable/kxworkstatus.vue";
import kxmetaltempsensors from "./historyTable/kxmetaltempsensors.vue";
import KxinclineStatistics from "@/views/sensorData/curveStatistics/kxinclineStatistics.vue";
import KxWorkStatusStatistics from "@/views/sensorData/curveStatistics/KxWorkStatusStatistics.vue";
import KxMeteorologystatistics from "@/views/sensorData/curveStatistics/kxMeteorologyStatistics.vue";

import KxMetalTempSensorsStatistics from "@/views/sensorData/curveStatistics/kxMetalTempSensorsStatistics.vue";

function getDateThreeDaysBefore(inputDateStr) {
  const date = new Date(inputDateStr);
  const threeDaysAgoMillis = date.getTime() - 24 * 60 * 60 * 1000;
  const threeDaysAgoDate = new Date(threeDaysAgoMillis);
  const year = threeDaysAgoDate.getFullYear();
  const month = String(threeDaysAgoDate.getMonth() + 1).padStart(2, '0');
  const day = String(threeDaysAgoDate.getDate()).padStart(2, '0');
  const hours = String(threeDaysAgoDate.getHours()).padStart(2, '0');
  const minutes = String(threeDaysAgoDate.getMinutes()).padStart(2, '0');
  const seconds = String(threeDaysAgoDate.getSeconds()).padStart(2, '0');
  const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  return formattedDate;
}

export default defineComponent({
  components: {
    RealTimeTree,
    kxincline,
    kxmeteorology,
    kxworkstatus,
    kxmetaltempsensors,
    KxinclineStatistics,
    KxMeteorologystatistics,
    KxMetalTempSensorsStatistics,
    KxWorkStatusStatistics
  },
  setup() {
    const state = reactive({
      isleftboxShow: true,
      drawer: false,
      dialogTitle: "",
      stationData: {
        kxIncline: {},
        kxMeteorology: {},
        kxWorkStatus: {},
        kxMetalTempSensors: []
      },
      id: null,
      emptyShow: true,
      historyviews: "",
      thermometryTitle: [],
      dataIntervalId: null,
      pictureDate: []
    });
    return {...useView(state), ...toRefs(state)};
  },
  created() {
    this.dataIntervalId = setInterval(() => {
      if (this.id === null) {
        return
      }
      this.getSensorsById();
    }, 1000 * 60)
  },
  beforeUnmount() {
    this.clearLbData();
  },
  unmounted() {
    // 在组件销毁前清除定时器
    this.clearLbData();
  },
  methods: {
    clearLbData() {
      if (this.dataIntervalId) {
        clearInterval(this.dataIntervalId);
      }
    },
    extractSubstring(str) {
      const index = str.indexOf('_');
      if (index === -1) {
        return ''; // 或者 throw new Error("No underscore found in the string");
      }
      const beforeUnderscore = str.slice(0, index);
      const afterUnderscore = str.slice(index + 1, index + 1 + beforeUnderscore.length);
      return [beforeUnderscore, afterUnderscore];
    },
    inclineHandle(type, unit, title, timeStamp) {

      this.$refs.kxinclinestatistics.init(type, unit, title, timeStamp);
    },

    meteorologyHandle(type, unit, title, timeStamp) {
      this.$refs.kxMeteorologystatistics.init(type, unit, title, timeStamp);
    },

    kxWorkStatusStatisticsHandle(type, unit, title, componentId, timeStamp) {
      this.$refs.kxworkwtatuswtatistics.init(type, unit, title, componentId, timeStamp);
    },
    kxMetalTempSensorsHandle(type, unit, title, componentId, timeStamp, cmdId) {
      this.$refs.kxmetaltempsensorsstatistics.init(type, unit, title, componentId, timeStamp, cmdId);
    },
    switcSrawer(state, title, timeStamp) {
      this.drawer = true;
      this.dialogTitle = title;
      this.historyviews = state;
      this.pictureDate = [getDateThreeDaysBefore(timeStamp), timeStamp]
    },
    playVideo(data) {
      if (data.type === "station") {
        this.thermometryTitle = this.extractSubstring(data.name);
        this.id = data.id
        this.getSensorsById();
      }
    },
    getSensorsById() {
      baseService.get(`/KxStation/kxstation/getSensorsById?id=${this.id}`).then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg);
        }
        this.stationData = res.data;
        this.emptyShow = false;
      });
    }
  }
})
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  padding: 40px 10px 20px 10px;
  position: relative;

  .bg-box {
    background-image: url(@/views/bigScreen/imgs/screen_bg_1.png);
    background-size: 100% 100%;
    border-radius: 6px;
  }


  .sum-danger {
    font-size: 16px;
    color: red;
    //background: linear-gradient(0deg, #c90505 0%, #FFFFFF 100%);
    //-webkit-background-clip: text;
    //-webkit-text-fill-color: transparent;
  }

  .sum-warning {
    font-size: 16px;
    color: #cc9200;
    //background: linear-gradient(0deg, #cc9200 0%, #FFFFFF 100%);
    //-webkit-background-clip: text;
    //-webkit-text-fill-color: transparent;
  }

  .left-box {
    height: 100%;
    display: flex;
    align-items: center;
    z-index: 999;

    .nav-box {
      display: flex;
      font-weight: 500;
      font-size: 16px;
      color: #FFFFFF;
      align-items: center;
      justify-content: space-around;

      div {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 150px;
        height: 46px;
        cursor: pointer;
      }
    }

    .navboxxz {
      background-image: url("/videox/nav-xz.png");
      background-size: 100% 100%;
    }

    .expandcontent {
      height: 100%;
      width: 0;
      overflow: auto;
      transition: width ease-out 0.2s;
    }
  }

  .content {
    height: 100%;
    width: 300px;
    overflow: auto;
    transition: width ease-in 0.2s;
  }

  .control {
    height: 120px;
    width: 22px;
    cursor: pointer;
    text-align: center;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .right-box {
    flex: 1;
    height: 88vh;
    padding: 20px;
    background-image: url("/videox/right_bg.png");
    background-size: 100% 100%;
    color: #FFFFFF;
    overflow-y: auto;

    .title-col {
      padding: 20px 0;
      font-size: 14px;
    }

    img {
      width: 14px;
      height: 14px;
    }

    .title {
      font-weight: bold;
    }

    .uptime {
      padding: 0 10px;
    }

    .tiele-right {
      display: flex;
      align-items: center;
      justify-content: right;

      span {
        cursor: pointer;
      }
    }

    .nrxx-cgq {
      background-image: url("@/views/sensorData/imgs/bjk.png");
      background-size: 100% 100%;
      font-weight: 400;
      font-size: 12px;
      vertical-align: top;
      padding: 10px 20px;
      margin-bottom: 10px;

      .title-box {
        display: flex;
        justify-content: space-between;
      }

      .cgq-box {
        p {
          text-align: center;
        }
      }

      .sum {
        font-size: 16px;
        color: #FFFFFF;
        background: linear-gradient(0deg, #00C4FF 0%, #FFFFFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .nrxx-jinju {
      background-image: none !important;
      height: 46px !important;
    }

    .nrxx {
      text-align: center;
      background-image: url("@/views/sensorData/imgs/bjk.png");
      //background-color: rgba(19,70,127);
      background-size: 100% 100%;
      font-weight: 400;
      font-size: 12px;
      vertical-align: top;
      padding: 6px;
      position: relative;
      height: 90px;

      .sum {
        font-size: 16px;
        color: #FFFFFF;
        background: linear-gradient(0deg, #00C4FF 0%, #FFFFFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
}
</style>
